<template>
  <base-paenl>
    <span slot="header">
      房源及其他信息
    </span>
    <div slot="main" class="slot-main">
      <div v-if="message != ''" class="panel-message">
        {{ message }}
      </div>
      <div v-else class="panel-row-flex">
        <div class="panel-row-flex-left">
          <div class="panel-row-title">
            租赁情况
          </div>
          <div style="margin-top: 20px;">
            <PieGraph
              :color="housColor"
              :dataset="data"
              :width="200"
              :showTotal="true"
            />
          </div>
        </div>
        <div class="panel-row-flex-right">
          <div class="panel-row-title">
            其他信息
          </div>
          <div
            v-for="(item, index) of dataList.qtxx"
            :key="index"
            class="panel-other-content"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import PieGraph from "~/components/templates/PieGraph.vue";
import { getHouseOther } from "@/assets/modules/service";

@Component({
  name: "CHouseOther",
  components: { BasePaenl, PieGraph }
})
export default class extends Vue {
  get floorData() {
    return this.$store.getters["panelData/floorData"];
  }
  @Watch("floorData", { deep: true })
  handleFloorData() {
    this.getHouseOther();
    // if (this.floorData.sjytssx && this.floorData.sjytssx !== "" && this.floorData.bxttssx && this.floorData.bxttssx !== "") {
    //   this.getHouseOther();
    // } else {
    //   this.message = this.floorData.sjytssx || this.floorData.bxttssx || '';
    // }
  }
  dataList: any = [];
  option: any = null;
  housColor: any = ["#fad06d", "#08ebff"];
  num = 0;
  data: any[] = [];
  message = "";
  mounted() {
    const win: any = window;
    this.dataList = win.dataConfig.houseOther;
    this.getHouseOther();
    // if (this.floorData.sjytssx && this.floorData.sjytssx !== "" && this.floorData.bxttssx && this.floorData.bxttssx !== "") {
    //   this.getHouseOther();
    // } else {
    //   this.message = this.floorData.sjytssx || this.floorData.bxttssx || '';
    // }
  }
  getHouseOther() {
    const param: any = {
      lzId: this.floorData.lzId
    };
    getHouseOther(param).then((res: any) => {
      if (res?.data) {
        if (
          !res.data.qtxx.length &&
          res.data.yczCount == 0 &&
          res.data.wzCount == 0
        ) {
          this.message = this.floorData.sjytssx || this.floorData.bxttssx;
        }
        this.dataList.zlqk[0].value = res.data.yczCount;
        this.dataList.zlqk[1].value = res.data.wzCount;
        this.dataList.qtxx = res.data.qtxx;
        this.getInfo();
      }
    });
  }
  getInfo() {
    let arr: any = this.dataList.zlqk;
    let newarr: any = [];
    newarr = arr.map((item: any) => {
      return {
        value: item.value,
        name: item.key
      };
    });
    let newnum: any = 0;
    for (let i = 0; i < newarr.length; i++) {
      newnum += newarr[i].value;
    }
    this.num = newnum;
    this.data = newarr;
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 170px;
}
.panel-row-flex {
  display: flex;
  .panel-row-title {
    width: 194px;
    height: 17px;
    background-image: url(../../assets/images/panels/cibiaotibeijingkuang-duan.png);
    background-size: 100% 100%;
    padding-left: 30px;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 16px;
    line-height: 17px;
    color: #fefefe;
  }
  .panel-other-content {
    width: 149px;
    height: 32px;
    background-image: url(../../assets/images/panels/liebiaokuangqian.png);
    background-size: 100% 100%;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    line-height: 32px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    margin: 10px 20px;
  }
}
</style>
